<script setup lang="ts">

import {
    Timer,
} from '@element-plus/icons-vue'

import {onMounted, ref, watch} from "vue";
import {FriendService, UserApplyCriteria, UserApplyVo, UserQueryCriteria, UserService, UserVo} from "/@/api/openapi";
import {ElMessage} from "element-plus";
import {useUserFriendStore, useUserStore} from "/@/store";
import {storeToRefs} from "pinia";

const tableRef = ref()
const searchParams = ref<UserApplyCriteria>({
    pageNum: 1,
    pageSize: 10
});
const total = ref(0);
const store = useUserStore();
const userFriendStore = useUserFriendStore();
const {userApply} = storeToRefs(userFriendStore);
const handleCurrentChange = (val: number) => {
    searchParams.value.pageNum = val
    loadData()
}

const loadData = async () => {
    userFriendStore.updateUserApply(searchParams.value)
}
onMounted(()=>{
    if(store.isSign){
        loadData();
    }
})

// 通过好友，拒绝好友信息
const access = (data: UserApplyVo) => {
    if (data.id === undefined) {
        return
    }
    FriendService.accessApply(data.id).then((res) => {
        ElMessage({
            type: 'success',
            message: res.message,
        })
        // 重新刷新一下页面
        loadData();
    }, (error) => {
        ElMessage({
            type: 'error',
            message: error,
        })
    })
}

const black = (data: UserApplyVo) => {
    if (data.id === undefined) {
        return
    }
    FriendService.deleteUserApply(data.id).then((res) => {
        ElMessage({
            type: 'success',
            message: res.message,
        })
        // 重新刷新一下页面
        loadData();
    }, (error) => {
        ElMessage({
            type: 'error',
            message: error,
        })
    })
}
</script>

<template>
    <div>
        <el-button @click="loadData" class="flesh">刷新</el-button>
        <el-table :ref="tableRef" :data="userApply.records" style="width: 100%; margin-bottom: 20px">
            <el-table-column prop="username" label="用户名称" width="180"/>
            <el-table-column prop="applyInfo" label="申请理由" width="180"/>
            <el-table-column prop="status" label="状态" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer/>
                        </el-icon>
                        <span v-if="scope.row.status===1" style="margin-left: 10px">申请好友</span>
                        <span v-if="scope.row.status===3" style="margin-left: 10px">已经拒绝</span>
                        <span v-if="scope.row.status===2" style="margin-left: 10px">通过好友申请</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operations" width="200">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="access(scope.row)"
                               :disabled="scope.row.status!==1">通过好友
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="black(scope.row)"
                               :disabled="scope.row.status!==1">拒绝好友
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pager-wrapper">
            <el-pagination
                    background
                    layout="prev, pager, next, jumper"
                    :total="userApply.total"
                    :page-size="searchParams.pageSize"
                    :currentPage="searchParams.pageNum"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<style scoped>

</style>